// 1.（this问题解决方案1）通过给事件绑定箭头函数来解决this问题
// // 创建类组件（）
// import React from "react";

// class EventBindComp extends React.Component {
//   count = 1;

//   // 1.0 定义事件方法
//   handerClick() {
//     console.log("我被触发了", this.count);
//   }

//   render() {
//     // console.log("render方法中的this=", this.count);
//     //   1.0 箭头函数的this是在定义的时候确定的，而箭头函数本身是没有this的，它会往外层找到最近一级的this
//     //   2.0 普通函数内部的this实在运行时确定的

//     return (
//       <div>
//         {/* 通过给事件绑定箭头函数来解决this问题 */}
//         <button
//           onClick={() => {
//             this.handerClick();
//           }}
//         >
//           请点我
//         </button>
//       </div>
//     );
//   }
// }

// export default EventBindComp;

// 2.（this问题解决方案2）通过在类组件中直接定义一个箭头函数来解决this的问题---推荐写法
// import React from "react";

// class EventBindComp extends React.Component {
//   count = 1;

//   // 1.0 定一个箭头函数的回调事件 (这种写法就是我们将来常见的写法，推荐写法)
//   handerClick = () => {
//     console.log("我被触发了", this.count);
//   };

//   render() {
//     // console.log("render方法中的this=", this.count);
//     //   1.0 箭头函数的this是在定义的时候确定的，而箭头函数本身是没有this的，它会往外层找到最近一级的this
//     //   2.0 普通函数内部的this实在运行时确定的

//     return (
//       <div>
//         {/* 通过给事件绑定箭头函数来解决this问题 */}
//         <button onClick={this.handerClick}>请点我</button>
//       </div>
//     );
//   }
// }

// 3.0 （this问题解决方案3）利用Bind方法来改变函数的this从而解决this问题
// import React from "react";

// class EventBindComp extends React.Component {
//   count = 1;

//   // 1.0 定一个箭头函数的回调事件 (这种写法就是我们将来常见的写法，推荐写法)
//   handerClick() {
//     console.log("我被触发了", this.count);
//   }

//   render() {
//     // console.log("render方法中的this=", this.count);
//     //   1.0 箭头函数的this是在定义的时候确定的，而箭头函数本身是没有this的，它会往外层找到最近一级的this
//     //   2.0 普通函数内部的this实在运行时确定的

//     return (
//       <div>
//         {/* 通过给事件绑定箭头函数来解决this问题 */}
//         <button onClick={this.handerClick.bind(this)}>请点我</button>
//       </div>
//     );
//   }
// }

// 4.（this问题解决方案4）通过在构造函数中通过bind动态改变this对象
import React from "react";

class EventBindComp extends React.Component {
  constructor() {
    super(); // 调用父类的构造函数，如果显示编写了构造函数，就必须显示通过super()的调用父类的构造函数,否则报错
    this.handerClick = this.handerClick.bind(this);
  }

  count = 1;

  // 1.0 定一个箭头函数的回调事件 (这种写法就是我们将来常见的写法，推荐写法)
  handerClick() {
    console.log("我被触发了", this.count);
  }

  render() {
    // console.log("render方法中的this=", this.count);
    //   1.0 箭头函数的this是在定义的时候确定的，而箭头函数本身是没有this的，它会往外层找到最近一级的this
    //   2.0 普通函数内部的this实在运行时确定的
    return (
      <div>
        {/* 通过给事件绑定箭头函数来解决this问题 */}
        <button onClick={this.handerClick}>请点我</button>
      </div>
    );
  }
}

export default EventBindComp;
